Han sido varias las preguntas sobre la forma de añadir los iconos de redes sociales en la sidebar y no es ningún misterio todo lo contrario, de forma muy simple los añadiremos paso a paso.
Lo primero que haremos será crear una clase para los botones y añadir los estilos a esa clase, para ello nos situamos antes de ]]></b:skin> y añadimos:

#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}

Con eso estamos diciendo que el contenido dentro del bloque llamado redes-sociales se posicionará centrado y tendrá a su alrededor un espacio de separación con el borde 25px. Para saber si está centrado añadimos un borde que luego podemos quitarle.
Ahora vamos a plantilla de diseño y editamos un nuevo gadget de HTML en su interior añadimos:

<div id="redes-sociales">
<a target="_blank" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" title="Suscribirse" type="application/rss+xml"><img alt="rss" style="border:0" src="url-imagen-Feed" /></a>

<a target="_blank" href="http://twitter.com/tu-nombre-twitter" title="Twitter">
<img alt="en Twitter" src="url-imagen-Twitter" />
</a>

<a target="_blank" href="http://www.facebook.com/profile.tu-perfil-facebook" title="Facebook">
<img alt="en Facebook" src="url-imagen-Facebook" />
</a>

<a target="_blank" href="http://www.youtube.com/user/tu-nombre" title="YouTube">
<img alt="YouTube" src="url-imagen-YouTube" />
</a>
</div>

Donde href es la dirección que sustituimos por cada url que corresponda o copiamos la url de la barra del navegador de la página que vamos a enlazar y reemplazamos la que tenemos por la que copiamos.
En url-imagen añadimos cada imagen en relación con el sitio que vamos a enlazar.

Si queremos que muestre opacidad y al pasar el cursor desaparezca en la hoja de estilos añadimos entonces:

#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}

a.redes-sociales img {
filter:alpha(opacity=40);
opacity: 0.4;
}
a.redes-sociales:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}

Y en el gadget los enlaces.
<div id="redes-sociales">

<a class="redes-sociales" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" target="_blank" title="Suscribirse" type="application/rss+xml"><img alt="rss" border:0="" border="0" src="url-imagen-Feed" /></a>

<a class="redes-sociales" href="http://twitter.com/tu-nombre-twitter" target="_blank" title="Twitter"> <img alt="en Twitter" border:0="" border="0" src="url-imagen-Twitter" /></a>

<a class="redes-sociales" href="http://www.facebook.com/profile.tu-perfil-facebook" target="_blank" title="Facebook"> <img alt="en Facebook" border:0="" border="0" src="url-imagen-Facebook" /></a>

<a class="redes-sociales" href="http://www.youtube.com/user/tu-nombre" target="_blank" title="YouTube"> <img alt="YouTube" border:0="" border="0" src="url-imagen-YouTube" /></a>
</div>


Aumentando o disminuyendo el valor de opacity conseguiremos más o menos opacidad.
De esa forma le estamos diciendo que la imagen tiene de opacidad 40 pero al pasar el cursor esa opacidad desaparece porque aumentamos a 100.
Para que los botones salgan en horizontal y no vertical debemos añadirlos en ese orden, es decir un código de enlace seguido de otro y separado por un espacio.
El Otorong@:

Esta muy bueno,justo lo que necesitaba :)loS invito a mi blog:
--------------------------
OTORONGUEANDO.BLOGSPOT.COM
--------------------------

Responder
Krlos Reyna

Ah y otra cosa amiga gem@, ¿puedo usar tus flechitas de siguiente entrada, y main? están finas =)

Hay algo que he querido hacer en mi blog y no he podido, me gustaría que la caja de comentarios este encima del bloc de comentarios.. Osea Primero la caja para comentar y seguidamente, los comentarios ya hechos. Resulta un poco incomodo para el lector desplazarse hacia abaaajo a buscar la caja para comentar.

Agradezco en el alma tus dos respuestas y tu tiempo. Un abrazo. Krlos Reyna

Responder
Aurora

Hola Gema,
fantástico y muy práctico este post.
Quería preguntarte un par de dudas que me tienen loca:
1. ¿Cómo hacer para colocarlos esos enlaces en el Header, sobre la imagen que tengamos en el Header? (cualquier pista me ayudaría un montón)
2. Si ponemos los enlaces dentro de un widget en la sidebar, por ejemplo los 4 que has colocado tú pero con 4 iconos, ¿cómo podríamos ponerlos en la posición que deseemos, es decir, en fila, un cuadrado, un arco? (sé que esta duda debe ser fácil pero soy muy nueva)

No sabes como te agradecería cualquier indicación!!
Mil gracias!!

Responder
GreatGiz

Que tal gem@.

Estoy iniciando en esto de los blogs y tu pagina me ha ayudado mucho, te agradezco que pongas todos estos tutoriales para los que no sabemos mucho de esto. :P

Tengo un par de preguntas acerca de como hacer unas modificaciones, espero me puedas ayudar.

1. Como puedo poner un texto como el de la parte inferior de tu pagina con el copyright?
2. Como se puede poner esa solapa en la parte superior de tu pagina?

Te dejo la dirección de mi blog que aun esta en construcción, espero algún día tu y quienes lo visiten encuentren algo que les sea útil.

rendereando.blogspot.com

Que estés bien, saludos.

Responder
Angel

Gracias Gema, me ha funcionado, :)

Responder
Angel

Me funciono aunque tuve problemas al intentar añadir el efecto...Por otro lado quisiera saber como añadir el código de Add this al blog, ya que dice que lo ponga en(div class='post-footer) y esto no aparece, muchas gracias.

http://www.addthis.com/web-button?type=bm&where=blogger&url=&bm=tb3&analytics=0

Responder
Gem@

:: Gracias por el comentario El Otorongo.

:: Krlos Reyna no hay problema que uses las flechas, sobre la forma de situar el editor de comentarios nunca lo hice.
Yo pienso todo lo contrario, los comentarios crean conversación una veces partiendo de la entrada y otras de temas distintos, en algunos casos (aquí suele ocurrir) en los mismos comentarios está la respuesta que buscamos.

:: Hola Aurora, en el header también se pueden añadir gadget por el mismo procedimiento de la sidebar, si no tenemos la opción de añadir gadgets %% estaentrada puede útil.
Para añadir los iconos de esa forma lo ideal sería crear una tabla y añadirlos en cada celda de acuerdo al sitio donde deseamos añadirlos.

:: Saludos GreatGiz, ese texto lo puedes añadir en la plantilla justo antes de </body>
Un ejemplo, en la hoja de estilos añadimos:
.datos{
float: left;
line-height: 2em;
color:#fff;
padding-left: 20px;
padding-bottom: 20px;
font-family:Arial, Verdana, Sans-Serif;
font-weight: normal;
font-size:10px;
background-color:#2F2F2;
}
con eso ya estamos indicado dónde se situará y de qué forma será el texto.
Justo antes de </body> añadimos:
<div class='datosr'>
<p>datos...<a class='datos' href='url-página' title=''>datos... </b> </a></p>
</div>

Si con la solapa te refieres al menú en %% esta entrada verás como conseguirlo.
Gracias por comentar :)

:: Me alegra que le funcionaran los botones Angel Luis González.
Normalmente ese código se añade en el post-footer y viene reflejado de esta forma más o menos.

<div class='post-footer-line post-footer-line-1'>
... Más código...
<div class='post-footer-line post-footer-line-2'>
... Más código...
<div class='post-footer-line post-footer-line-3'>
... Más código...
justo después de la primera línea o la segunda depende lo que tenemos añadido es donde debemos incluir ese código que le proporcionan, es probable que en lugar de
<div tengamos <p class algo así:
<p class='post-footer-line post-footer-line-1'>

Responder
GreatGiz

Gracias por responder.

Lo de la solapa si lo pude hacer.

Lo que te mencionaba del copyright me tira un error.

Mensaje de error de XML: The element type "a" must be terminated by the matching end-tag "".

Que podria ser?

Al parecer lo que ocaciona el error es cuando coloco la segunda entrada que me proporcionaste.

Si me puedes explicar un poco mejor te lo agradeceria mucho. :D

Que estes bien, saludos.

Responder
Gem@

:: Cometí un error :S
Básicamente lo que se trata es de añadir un bloque en este caso "datos" y creamos unos estilos para ese bloque que son los que añadimos en la hoja de estilos que son los que va a ubicar el texto además e color, tamaño .. a la letra.
Dentro del bloque añadimos el texto y los enlaces que vamos a usar y al mismo tiempo utilizamos la etiqueta span para añadir distintos estilos.
<div class='datos'>
<p><span style='color: white;font-family:Trebuchet MS, Trebuchet, Helvetica, Arial; font-size: 16px;'> &#169; 2010 </span> <a class='datos' href='url-blog' title='tu-blog'> <span style='color: white;font-family:Trebuchet MS, Trebuchet, Helvetica, Arial; font-size: 16px;'> Datos.. <b>&#187;</b> </span> </a></p>
</div>

Responder
Anónimo

:):)gracias gema!!!!:):)

Responder
GreatGiz

Que tal Gem@:

Te comento que solo añadí el ultimo código que me diste y me funciono de maravilla. :D

El código anterior que me diste también había que agregarlo o solo este ultimo?

Intentare ensanchar el blog, ya mas o menos he visto como va y que tengo que modificar la imagen por ser la rounders.

Te invito a visitarlo una vez que este terminado.

Te agradezco mucho el que ayudes a los que apenas empezamos.:D

Que estes muy bien, saludos!

Responder
Gem@

:: Suerte Vecerry :)

:: GreatGiz hay que dejarlo como está, el otro código son los estilos, quedó estupendo ;)

Responder
Mauricio

Hola Gema, necesito saber como puedo organizar los botones de directorio que los botones queden uno al lado de otro pero que queden juntos y para abajo también, no se si me entiendes solo quiero que queden bien ordenados,Gracias Gema y saludos.

Responder
Gem@

:: Mauricio yo creo que con el espacio que tienes lo mejor es incluirlos en una %% tabla

Responder
Mauricio

Gracias Gema me ha quedao muy bien y ordenado, saludos y un beso para tí.

Responder
Gem@

:: Estupendo Mauricio, gracias por venir a contarlo :D es un detalle.

Responder
pepe

exelente :D

mañana lo intentare ;)

ahi aviso como me fue

saludos!!

Responder
pepe

una duda, como puedo hacer para agregar esos botnes bajo de cada entrada ??
ahi si que quedaria feliz xD

Responder
pepe

mi blog es http://solodvdr.blogspot.com por si no sabes xD

Responder
Gem@

:: La próxima entrada tratará de ese tema Pepe :D

Responder
Valientess

esta muy bueno el blog gracias!!! Les dejo mi blog por si les interesa el programa valientes SE ENTERAN DE TODO ...BLOG: http://valientess-lucastro.blogspot.com

Responder
Gem@

:: Gracias por el comentario Valientess.

Responder
GreatGiz

Que tal Gem@.

Ya comence a publicar entradas, aplique los tips que me diste y ensanche un poco el blog, me seria de mucha ayuda si en una oportunidad le echas un vistazo y me das tu opinion sobre que deberia mejorar.

http://rendereando.blogspot.com/

Espero algun dia encuentres algo de utilidad ahi. :)

Que estes bien, saludos.

Responder
Gem@

:: GreatGiz siempre se puede mejorar algo ¿pero qué cosa? eso se va viendo con el tiempo y depende mucho del autor del blog, de sus gustos, sus necesidades y sus aspiraciones.
Empezaste a mejorarlo ¿te parece poco? sigue así y disfrutarlo :)

Responder
pepe

ok gema esperare la otra entrada que dijiste :D

Responder
Gem@

:: Pepe esa entrada ya está desde el día siguiente a mi comentario :)

Responder
Eva Flores

Hola Gem@! Acabo de implementar estos botones en mi blog y queda perfecto. Gracias por compartir!
Eva

Responder
Anónimo

Hola Gema: el efecto quedó perfecto en mi blog en unos botones que tengo en el footer. Queria saber si es posible hacer el efecto al revés, es decir, que cuando situe el cursor sobre el botón aparezca la opacidad y no a la inversa. No sé si me estoy explicando bien. Gracias por tus enseñanzas y por la amabilidad con que siempre respondes a todos :)

Responder
Angel

Gracias por este post Gemma, me ha parecido muy interesante y ya lo s he aplicado, por cierto la url de los iconos la he cogido de los tuyos, espero que no te importe, aunque me gustarían más pequeños. Voy a ver si los encuentro mas pequeñitos.
Un saludo.

Responder
Gem@

:: Gracias a ti por comentar *Eva* :)

:: Carolina el proceso como bien dices es a la inversa es decir cambiamos el grado de opacidad y ponemos mayor opacidad en en efecto hover menor en el enlace.

a.redes-sociales:hover img {
filter:alpha(opacity=40);
opacity: 0.4;
}

a.redes-sociales img {
filter:alpha(opacity=100);
opacity: 1.0;
}

:: Me alegra que resultara bien @ngel.
Es más cómodo coger la url de la imagen que descargar la imagen y alojarla pero no es conveniente y te explico por qué..
Cuando una misma url está siendo utilizada por muchas personas se corre el riesgo que la banda ancha sea superada y la imagen deje de verse, si se trata de un servidor de pago se consume banda ancha del servidor es decir que la persona que está pagando tendrá menos espacio disponible.
En Blogger eso no ocurre pero si puede ocurrir como días atrás que eliminé un álbum de Picasa y las personas que tenían esas imágenes porque copiaron la url las perdieron.
Por beneficio de todos las imágenes debemos descargarlas y alojarlas así siempre tendremos imágenes :)

Responder
Anónimo

Gracias por explicarme, Gem@, es un efecto muy bonito para aplicarlo en imágenes.
Un gran cariño

Responder
Gem@

:: En realidad hay muchos efectos para imágenes, todos los creados con css nos evitan cargar la plantilla de script y resultan igual de atractivos :)

Responder
Alicia

Buenas nochess¡¡¡¡ aynss tenia escrito el post y me lo borro ..bueno ..te decia que acabo de poner unos iconos sociales en el blog ..y no se por que me dio error el codigo en la plantilla ...pero que..como no estaba asi como para estar con bobadassssss jajajja..lo que hice fue usar solo el codigo que has puesto del gadget y funciona perfectamente No queda el diseño igual claro esta...pero para mis necesidades me ha venido de perlas y asi lo dejo..no toco ni una comilla mas por hoy jajajja...mil gracias cielo ..si quieres echale una ojeada;)..muaskk

Responder
Gem@

:: Hola Luna!! te quedó como bien dices de perlas :)

Responder
Mauricio

Hola Gema,tengo un problema se me han borrado todos los botones de directorios, nesecito saber como puedo ponerlos en el footer uno al lado de otro ordenadamente y que se vean curiosos dame una solución por favor que no tengo ningun botón,Gracias como siempre Gema y Saludos para tí.

Responder
Gem@

:: Mauricio en qué parte del footer?

Responder
Mauricio

Gracias Gema ya lo he solucionado, igual te lo agradesco y muchos saludos para tí.

Responder
Gem@

:: Me alegra esté solucionado Mauricio ;)

Responder
zetta
Este comentario ha sido eliminado por el autor.
Responder
zetta

Muchas gracias Gema, el codigo que haz publicado 100% entendible.

Gracias por compartir tu conocimiento.

...........
Luis Segura

Responder
zetta

Hola Gema :)

Espero que puedas ayudar con una inquietud que tengo... yo trabajo con Firefox... el ejemplo que tu has escrito, corre del todo bien, ahora el problema es con el ie8, que malogra la imagen, bueno el efecto "funciona bien", pero como dije antes malogra la imagen.

Bueno a lo que voy, es que en tu blog los botones que tienes en el contenedor ¿te suscribes? , no presentan problema en el ie8, si bien es cierto el efecto no funciona, pero las imagenes no se distorsiona, como en el Firefox.

Esa mi inquietud, no se si hay algunos codigo que permitan que se visualize de forma correcta en los diferentes navegadores.

Bueno me paso a retirar, una vez mas agradeciendote, por compartir los contenidos interesantes de tu blog. :)

Luis Segura

Responder
Gem@

:: No veo ese problema zetta :S

Responder
ASR

Hola Gemma, he puesto dos botones, el de youtube y el facebook, pero uno no me funciona, el de facebook enlaza con una página que no existe. he probado con dos direcciones de facebook, la que pone http://www.facebook.com/people/@/ y la http://www.facebook.com/profile.php?id=0000000000&ref=name, con mi numero, pero no lo consigo, ¿qué hago mal? muchas gracias

Responder
Gem@

:: He probado tu botón a Facebook y funciona perfectamente Susa :)

Responder
ASR
Este comentario ha sido eliminado por el autor.
Responder
ASR

si? pues yo no lo consigo. pero genial si os va a los demás es lo importante, quizá tenga que estar logeada en facebook, cuando lo hago no me falla pero si no estoy me sale "no se pudo encontrar la página". muchas gracias gema por tu tiempo y por todo tu blog, es genial. bss

Responder
Gem@

:: Se accede sin problemas Susa :D

Responder
Anónimo

Hola de nuevo Gem@... queria preguntarte de algo, se podria colocar esos iconos con un tamano ya predeterminado?? ya sea ponerlos en un cuadro que tengan todos el mismo tamano,..

Responder
Gem@

:: Alicia lo ideal es que los iconos tengan todos el mismo tamaño porque si le añadimos las medidas la imagen deja mucho que desear.

Responder
Mr. Chapter

Gema en algunas entradas tuyas subes iconos para ponerlos, pero esos iconos no estan en paginas si no en mi ordenador
¿como se añaden esos?

Responder
Mr. Chapter

a y siento las molestias, ultimamente estoy siendo muy pesado :S

Responder
Gem@

:: guither los iconos son imágenes se añaden igual que cualquier imagen subiéndolos a un servidor en este caso puede ser una entrada del blog o directamente al álbum de Picasa que es donde se alojan todos las imágenes que vamos subiendo a las entradas.
Una vez subidas las imágenes copiamos la url directa de la imagen y la añadimos donde deseamos visualizar el icono o bien sustituimos el código que dice ·url-imagen-xxxx por la url de tu imagen :)

Responder
Samantha Herrera

Muy xido grax ;)

Responder
Soñé Que Me Querías

Hola Amiga gema he aprendido mucho con tu blog, pero tengo una pregunta con esto de añadir botones de redes sociales, soy nuevo en esto de los blog y me gustaria preguntarte, hice paso a paso lo que indicas aca pero al ver el resultado se ve el marco punteado pero no aparece los iconos de las redes sociales, pero si tu posiciones el puntero de hace el enlace, no se que estoy haciendo mal en esto, ayudame please.... gracias

Responder
Soñé Que Me Querías

Los iconos los tengo en un album en picasa, gracias

Responder
Gem@

:: Soñé Que Me Querías, el problema es que estás enlazando la página y debes enlazar la imagen, es decir añadir la url directa de la imagen :S

Responder
Pavelkapaz

Gracias Gem@, me gusto bastante como quedan los botnos
Saludos

Responder
Gem@

:: Estupendo Pavelkapaz :D

Responder
Maty

Hola Gema, buenas noches.
¿de esta forma, salen en cada entrada, es decir, para compartir cada entrada independientemente, o el blog al completo?
Gracias.

He ido mas o menos solucionando cosas, pero la verdad que no logro agrandar el blog, y la columna central, queda media tapada por la sidebar izquierda, seguiré intentandolo a ver que tal.

besos y gracias!!!

Responder
Gem@

:: Más que para compartir es para suscribirse Maty y para el blog completo :)

Desconozco la forma de modificar el ancho de esa plantilla, no viene especificado el ancho.
Si vas a diseñar la plantilla completa y personalizarla a tu gusto siempre es mejor utilizar la plantilla Minima de Blogger.
Ahora sólo tienes añadido el fondo creo, pero luego imagino que querrás hacer algún que otro cambio y te vas a encontrar con más de un inconveniente :S

Responder
Maty

Aaahh!!! es que he visto por ahí, sitios, en las que se pueden compartir las entradas, investigaré a ver que encuentro y te contaré ;)

Huysss, que si me dio problemas...jajajja ;)

Responder
Gem@

:. En esta entrada de Vagabundia verás como hacerlo Maty:
http://vagabundia.blogspot.com/2010/02/compartir-entradas-en-diferentes.html

Responder
Unknown

No sirve en internet explorer ... como hago :S

Responder
Gem@

:: juan_pablo funciona perfectamente en Explorer, mira si tienes tu navegador actualizado ;)

Responder
Manuel Victoria

Hola Gema... perdona, me he quedado solo con el icono de facebook, pero no hay forma de que salga la foto... al pinchar se abre la pagina... pero no aparece la foto del icono

Responder
Gem@

:: Manuel Victoria en qué parte de la sidebar está añadido?? yo tampoco lo veo :S

Responder
Manuel Victoria

Lo borre pero lo acabo de poner otra vez... justo al principio antes de la barra de traduccion

Responder
Gem@

:: Manuel Victoria, no sale la imagen porque se ha añadido la url de la página donde está la imagen en lugar de la url directa que sería la siguiente:
http://lh5.ggpht.com/_mt_EX8z2gAY/TObR2pQA4wI/AAAAAAAAAB4/DkJVc93JsRQ/Furry-Cushion-Facebook_256.jpg
(es un botón muy grande creo de 256x256 )

Responder
Manuel Victoria

Disculpa mi ignorancia al respecto... soy un novato en esto de los blogs... he copiado y pegado la direccion que me has dicho y si que es verdad que sale algo grande... mi pregunta ahora es como hacerlo mas pequeño?

Responder
Gem@

:: Manuel Victoria veo que ya está el problema resuelto :)

Responder
Unknown

Hola Gema!
Tengo una duda, ya puse:

#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}
Antes de: ]]>

Pero ahora no se donde tengo que poner el resto, en que parte de la plantilla. :$
Me lo explicarías nuevamente?
Muchas Gracias

Responder
Gem@

:: El segundo paso es añadir en un nuevo gadget de html las imáges. En la entrada viene detallado lo que hay que incluir.
Cuando guardes lo añadido debes arrastrar el gadget donde deseas situarlo.

Responder
ofo1965

Hola Gema, ahora por aquí.

No acabo de entender como poner mi perfil de facebook.

Haber si logro cerrar todo esto.
Gracias de antemano.

Responder
ofo1965

Solucionado Gema. He podido yo solito.
Muchas gracias.

Responder
Unknown

Tengo una consulta, como puedo hacer para hacer dos filas de íconos? :) Hice todo lo que dijiste. mi blog es http://notannuevo.blogspot.com

Responder
Gem@

:: La etiqueta <br> produce un salto de linea Mark Meyer, puedes añadirla al final del código de la primera línea o al principio de la segunda.

:: Me alegra esté solucionado Ofo, lamento ver el comentario con tanto retraso.

Responder
Jota
Este comentario ha sido eliminado por el autor.
Responder
Puzzle

Cojonudo, me gustan estos botones :)
Me gustaria añadirlos a mi blog PERO, (que raro yo siempre con los peros, jamás estoy conforme O.o jejeje) no tengo pagina en face y tampoco quiero, preferiria que los botones funcionaran para un simple "ME GUSTA". Es decir, los mismos botones, el mismo diseño pero para una funcion de "me gusta". Puede hacerse? en tal caso cual es la url a agregar para dicho "me gusta"?

Un saludo Gema

Responder
Gem@

:: Lui'S pues ni idea, a no ser que quieras el mismo botoncito pero que no haga ninguna función, porque
¿qué es lo que se supone que hará?

Responder
Aconteciendo, LO QUE PASA EN EL MUNDO...

NICE MEN TE INVITO A MI BLOG QUE ES NUEVO PARA QUE OPINES COMO VA!! www.mbcsantiago.blogspot.com

Responder
Gem@

:: MILLIONAIRE BOY'S CLUB está muy bien el blog :)

Responder
Aconteciendo, LO QUE PASA EN EL MUNDO...

GRACIAS GEM@ :D

Responder
Gem@

:: A ti por comentar :)

Responder
xjojoxx

hasta que porfinn!! encontre lo que queria!

te lo agradesco mucho!!

exitos saludos

Los invito a mi blog http://omoshitv.blogspot.com/

Responder
Gem@

:: Me alegra te fuera útil xjojoxx :)

Responder
Sergio HM

Genial, muchas gracias por el aporte! :D

Responder
Patán

Gem@ como coloco un boton de twitter al final de la enrada para que la sigan esa entrada y todas las entradas, es decir, que cada entrda tenga su icono......

Responder
Gem@

:: Hola Patán mucho tiempo sin verte!! ¿todo bien? espero que si :)
Los iconos a redes sociales en el post-footer puedes incluirlos de esta %% forma .

Responder
Jeffries

... no me funciona el efecto de opacidad :'(

Responder
Gem@

:: Prueba quitando ese comentario que añadiste a los estilos Jeffries /* ICONOS SOCIALES */

Responder
Jeffries

@gema borre /*ICONOS SOCIALES*/ pero aun así el efecto no funciona :(

Responder
Gem@

:: Jeffries mira bien porque falta el cierre de los estilos para feed-links y sobra uno al final. Tienes lo siguiente:

.feed-links {
display: none;
visibility: hiden;
#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}
a.redes-sociales img {
filter:alpha(opacity=50);
opacity: 0.5;
}
a.redes-sociales:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}
}

y debería ser así:

.feed-links {
display: none;
visibility: hiden;
}

#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}
a.redes-sociales img {
filter:alpha(opacity=50);
opacity: 0.5;
}
a.redes-sociales:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}

Responder
Jeffries

... :O no me di cuenta que faltaba un cierre de llave !! .. gracias por el tiempo gema :) ... un último capricho, se puede quitar el marco que queda al rededor de los iconos ? xd.. es un detalle si no se puede no importa :D

Responder
Gem@

:: El borde lo puedes quitar en
border: 1.9px dashed #C0C0C0;
puesdes eliminar la línea completa o poner a border: 0px :)

Responder
Susana

Hola Gema, estoy intentando enlazar mis entradas del blog en facebook, para que aparezcan automaticamente (sin necesidad de darle al icono cada vez). No se si se puede hacer.
Ya tengo conectados el face y el twitter, pero no consigo enlazar el blog. Ahora tengo que escribir cada post en los dos lugares, y me gustaría saber si es posible hacer esto que comento, o sea, que al poner una entrada al blog, esta se muestre en el face, y de este a su vez a twitter.
Gracias por anticipado.

Responder
Unknown

Hola Gema! Yo segui todos estos pasos para agregar mis iconos, pero en la parate que dice URL de la imagen, cuando la coloco no me sale nada. Cual seria en URL de la imagen entonces? Le agradezco su ayuda de antemano, mi blog es:

http//:hermosayprecios.blogspot.com

Responder
Gem@

:: Susana en twitter desde el mismo FeedBurner se puede hacer. Busca la pestaña "Socialize" y ahí deberás ingresar a tu twitter y dar los permisos para la publicación automática.

En Facebook creo que era en "Notas" y ahí saldra una opción que dice "Importar notas de un blog". Es necesario incluir ahí el feed del blog.


:: Duchesse♥ pensaba que ya te había respondido en otro hilo de comentarios, decía que yo si veo las imágenes al parecer lo solucionaste :)

Responder
María Pilar

Hola Gema: yo tengo puestos estos botones en las entradas como indicas aquí, pero quiero ponerlos en el header como los tienes tu también, solo que en mi caso a la izquierda, bajo el título del blog. Imposible!!!:$

Responder
Gem@

:: Hola Pilae, siento ver tu comentario ahora :S
Verás, yo tengo el header dividido en dos, en la parte de diseño se aprecia el espacio para añadir gadgets uno a la izquierda y otro a la derecha.
Hice eso porque mi logo ocupa poco espacio y pensé que de esa forma cada vez que deseo añadir algo allí arriba (como las etiquetas que las tuve hace tiempo y estoy pensando poner otra vez) me resultaría más cómodo que fuera un gadget en lugar de trabajar sobre la plantilla.
Eso no quita que la imagen de fondo se vea unificada ocupando todo el ancho como puedes ver.
Me voy por las ramas jajajaja quiero decirte que esa es la forma que yo lo tengo y puedes hacerlo así si quieres pero yo lo intentaría antes en otro blog con la misma plantilla.
http://gemablog-.blogspot.com/2009/07/header-dividido.html

De todas formas no es necesario tomar esas medida tan drástica y se pueden añadir directamente a la plantilla buscando justo después de la descripción.

Responder
María Pilar

Yo también tengo dividido el header en dos, pero me queda un gran espacio en blanco debajo de la descripción y lo quería ocupar. Si pongo una imagen más pequeña no se me centra como está ahora. Estoy haciendo cambios drásticos en la plantilla y no sé si sería mejor elegir una nueva. ¿?

Responder
Maria Elena Garcia Guanaguanay

Excelente!!! Julia, me ha encantado como ha quedado en mi blog. Si en un futuro quisiera agregar más botones todos alineados en una sola fila ¡cómo lo hago?. Saludos y muchas gracias

Responder
Gem@

:: Pilar Moreno por qué no haces esos cambios en un blog de pruebas con la misma plantilla y así vemos la forma de solucionarlo?
No hace falta que añadas los gadgets ni todo lo que tienes ahora, con la parte del header es suficiente, así le añadimos unos estilos a esa parte.
Si lo que deseas es cambiar de aires por decirlo de alguna forma solo te recomiendo una cosa... Busca entre plantillas originales de Blogger, nada de adaptadas o de las nuevas.


:: María Elena puedes añadir todos los iconos que quieras siempre que no ocupen más espacio del disponible :)

Responder
María Pilar

Gracias Gem@, voy a intentarlo en un blog de pruebas, ya te diré. Feliz domingo :)

Responder
Unknown

Hola esta muy bien tu post, me ha ayudado mucho.
La verdad es que andaba un poco loco mirando como poner enlaces a redes sociales pero gracias a tu post, todo arrglado. Ademas de ser util, esta bien explicado :D si no te molesta dejare la direccion de mi blog por si quieres ver como es
http://sacred-dream.blogspot.com/

Responder
MaGlOoRd

mmmmmmmm,, un datito esos botones de redes sociales quiero subirlos a la esquina de mi blog como tu lo tienes, como lo agoo,porfaa como q la le da elegancia al blogg, graxxx :)

Responder
Gem@

:: Pilar Moreno creo que me he liado con los comentarios porque al final te respondí en el otro :)

:: Gracias Abaddon :)

:: MaGlOoRd en los comentarios se habla de eso, mira la respuesta en el nº 99 :)

Responder
MaGlOoRd

GRACIAS ERES LO MAXIMOOOOO,,,,, :)

Responder
Gem@

:: Gracias a ti MaGlOoRd :)

Responder
Syl

Muchas gracias! ya lo he colocado en mi blog :)

Gem@

Perfecto Syl :) hacía tiempo que no sabía de ti, te mando un abrazo :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top